<template>
  <div>
    <div class="wrapper">
      <div class="w-one">
        <div class="left" @click="jump('/ranking')">
          <div class="l-desc1">打包！ 安全！ 玩的开心</div>
          <div class="l-desc2">项目交易使游戏更愉快！</div>
          <div class="l-desc3">游戏交易排行榜GO！</div>
        </div>
        <div class="center" @click="jump('/game')">
          <div class="c-desc1">商品购物中心</div>
          <div class="c-desc2">联盟网站上提供的商品一个不少</div>
        </div>
        <div class="right" @click="jump('/recruit')">
          <div class="r-desc1">招募啦</div>
          <div class="r-desc2">大型买卖平台</div>
        </div>
      </div>
      <div class="w-two">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    jump(path) {
      this.$router.push(path);
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  .w-one {
    display: flex;
    margin-bottom: 16px;
    .left {
      padding: 73px 0 0 52px;
      color: #fff;
      width: 600px;
      height: 429px;
      background: url("https://oss.itemplay.com/1f7976a42025ff5c2a573c00927bec4.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 16px;
      cursor: pointer;
      .l-desc1, .l-desc2{
        font-size: 16px;
        margin-bottom: 10px;
      }
      .l-desc2 {
        margin-bottom: 25px;
      }
      .l-desc3 {
        font-size: 30px;
      }
    }
    .center {
      padding: 53px 0 0 27px;
      width: 283px;
      color: #fff;
      height: 429px;
      background: url("https://oss.itemplay.com/010390a8af9d188ba4057de7dd6fc8d.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 16px;
      cursor: pointer;
      .c-desc1 {
        padding-left: 42px;
        font-size: 24px;
        margin-bottom: 17px;
      }
      .c-desc2 {
        font-size: 16px;
      }
    }
    .right {
      padding: 48px 0 0 44px;
      width: 283px;
      height: 429px;
      background: url("https://oss.itemplay.com/b3eb519cb8c93c85ab026dec98abd33.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #fff;
      cursor: pointer;
      .r-desc1 {
        font-size: 24px;
        margin-bottom: 20px;;
      }
      .r-desc2 {
        font-size: 16px;
      }
    }
  }
  .w-two {
    height: 119px;
    background: url("https://oss.itemplay.com/a94f4ded9b6a02f32da600c5a567699.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>>
